Si piensas añadir Lytebox te recomiendo leer antes esta entrada.
Hace tiempo hablé de un
visor de imágenes que
J.Miur de
Vagabundia nos dió a conocer. Se trataba de un Script de
Dynamicdrive cuya función es ampliar las imágenes sin necesidad de salir de la página.
Hoy he experimentado con
Lytebox, tiene diferentes aplicaciones, por una parte podemos usarlo como visor con efecto de ampliación en imágenes únicas o agrupadas. Por otra dispone de un bonito Slideshow con imágenes que van cambiando cada 5 segundos sin necesidad de clicar en la siguiente.
Por último y para hacerlo más completo añade la posibilidad de añadir un iframe.
Para comenzar a usarlo es necesario
descargar la última versión de Lytebox que en estos momentos en la
3.22Una vez lo descargamos extraemos los archivos lytebox.js y lytebox.css y los alojamos en nuestro servidor.
Ya alojados los archivos nos situamos en nuestra plantilla Edición HTML y justo antes de </head> añadimos lo siguiente:
<script type="text/javascript" language="javascript" src="archivo-lytebox.js"></script><link rel="stylesheet" href="archivo-lytebox.css" type="text/css" media="screen" />Donde archivo-lytebox.js los sustituiremos por la url del archivo lytebox.js que alojamos en nuestro servidor. Haremos lo mismo donde archivo-lytebox.css
Una vez guardados los cambios para ver los efectos tenemos tres opciones.
Añadirlo a una imagen única incluyendo la etiqueta
rel="lytebox" al enlace.
<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>
¿Cómo añadimos una imagen en lugar de texto?
Sustituyendo
texto o imagen por
<img src="url-de-la-imagen">Por lógica si lo que vamos a mostrar es una miniatura la imagen tendría que ser de menor tamaño que la original que veríamos en la ventana modal, para no vernos obligados a reducir la imagen para obtener la miniatura lo que podemos hacer es obligarla a mostrarse en un tamaño determinado.
<img style="width:150px;height:200px;"src="url- de -la imagen"/>Con
width le damos anchura y con
height altura.
Hacerlo en un grupo de imágenes añadiendo la etiqueta
rel="lytebox[gema]"(Sustituir gema por el nombre adjudicado al grupo de imágenes) ejemplo: paisajes, flores...<a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 1</a><a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 2</a><a href="Url-de-la-imagen" rel="lytebox[gema]" title="Título">texto o imagen 3</a>
Crear un Slideshow añadiendo la etiqueta
rel="lyteshow[gema]" (Sustituir gema por el nombre adjudicado al grupo de imágenes) en el siguiente ejemplo: Plumajes<a href="Url-de-la-imagen" rel="lyteshow[Plumajes]" title="Título">texto o imagen 1</a><a href="Url-de-la-imagen" rel="lyteshow[Plumajes]" title="Título">texto o imagen 2</a><a href="Url-de-la-imagen" rel="lyteshow[Plumajes]" title="Título">texto o imagen 3</a>
La posibilidad de añadir un iframe con la etiqueta rel="lyteframe" o rel="lyteframe[gema]" resulta muy útil cuando tratamos de mostrar una página si necesidad de salir del blog.
<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>
Al usar lyteframe podemos añadir barra de scroll y escoger tamaño, lo haremos con la etiqueta
rev<a href="Url-de-la-pagina" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>
En "Título" añadimos el título de la imagen.
Donde "Url-de-la-imagen" y "Url-del-iframe" la Url correspondiente según el caso.
En "texto o imagen" escribiremos el texto que servirá de enlace. Si es una imagen sustituiremos "texto o imagen" por <img src="url-de-la-imagen">
"Añadir a nuestra ventana modal las imágenes"La forma más sencilla de modificar un archivo es localizarlo en el
Bloc de notas.
¿Dónde está ese
Bloc de notas?
Debemos ir a nuestro escritorio y clicar en Inicio, buscamos el Bloc de notas y lo editamos de la siguiente forma:
Abrimos “Archivo” luego “Abrir…” y localizamos en nuestro PC el archivo que vamos a editar.
Una vez localizado lo modificamos según requiere, es decir añadiendo la url de cada imagen de forma que coincida nombre y color.
Una vez añadidas las imágenes guardamos los cambios en “Guardar como…” lo podemos guardar cambiando el nombre del archivo para saber que es nuestro archivo modificado o identificarlo en cualquier momento. Eso si… aunque cambiemos el nombre debemos guardarlo con la misma extensión.
Una vez guardado ya podemos subirlo a nuestro servidor.
"Pasos a seguir para añadir las imágenes al archivo CSS"Si sólo utilizamos Lytebox como visor de imágenes bastará con añadir la imagen “CLOSE” (cerrar) y "Loading" (imagen de carga)
Buscaremos en el archivo descargado de imágenes una imagen del grupo Loading (imagen de carga) la buscaremos del color a nuestro agrado, la alojaremos en algún servidor para conseguir la url.
Una vez tenemos la url de la imagen localizamos en el archivo CSS donde dice:
#lbLoading { position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(images/loading.gif) center no-repeat;
Añadiremos la url de la imagen en lugar de “images/loading.gif”
Ahora vamos a añadir la imagen "
Close"
#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; } #lbClose.grey { background: url(images/close_grey.png) no-repeat; } #lbClose.red { background: url(images/close_red.png) no-repeat; } #lbClose.green { background: url(images/close_green.png) no-repeat; } #lbClose.blue { background: url(images/close_blue.png) no-repeat; } #lbClose.gold { background: url(images/close_gold.png) no-repeat; }
Para utilizar el
Slideshow de
Lytebox es necesario añadir todas las imágenes de un mismo color.
Si deseas ahorrar el trabajo de añadir las imágenes puedes copiar el contenido del siguiente archivo y añadirlo en la plantilla justo antes de </head> (contiene las imágenes en color gris)
Lytebox css con imágenes grey.La demo de estos ejemplos la podéis ver en el
siguiente blog de pruebas.
19
opiniones
